<template>
  <div>
    <section class="answer_list">
      <van-pull-refresh v-model="answer.refreshing" @refresh="fnLoadMore" :disabled="disabled">
          <van-list
            v-model="answer.loading"
            :finished="answer.finished"
            :finished-text="text"
            @load="fnLoadData"
          >
            <van-row class="list aui-bg-f aui-border-b" v-for="(item, index) in answer.items" :key="item.id" @click="fnOpenDetail(item.id)" v-cloak>
                <van-col span="6">
                    <div class="good-img" v-bind:style="{backgroundImage:'url(' + item.image + ')'}" v-lazy="item.image">
                    </div>
                </van-col>
                <van-col span="18">
                    <div class="cont">
                        <div class="name van-ellipsis aui-ftn14 aui-text-7 aui-padded-b-10">
                            <span class="aui-ftn12 aui-text-center aui-text-f aui-bg-red aui-margin-r-5 tag">问</span>{{item.question}}
                        </div>
                        <div class="aui-padded-b-10">
                            <span class="tag reward aui-margin-r-5 aui-text-f aui-ftn12 aui-text-center">奖</span>
                            <span class="aui-text-red aui-font-weight aui-ftn18" v-text="item.red"></span>
                            <span class="aui-text-7 aui-ftn14">元</span>
                        </div>
                        <div class="aui-padded-b-5">
                            <span class="tag aui-bg-purple aui-margin-r-5 aui-text-f aui-ftn12 aui-text-center">剩</span>
                            <span class="aui-text-7 aui-ftn14">{{item.exitnum}}/{{item.num}}份</span>
                        </div>
                        <div class="da aui-text-center aui-text-red aui-ftn18">答</div>
                    </div>
                </van-col>
            </van-row>
          </van-list>
      </van-pull-refresh>
    </section>
    <div v-if="answer.isTotal && answer.items.length == 0" v-cloak>
        <div class="no-data aui-text-center aui-text-9">
            <i class="iconfont icon-lujing1161"></i>
            <div class="aui-ftn16">
                空空如也~
            </div>
        </div>
    </div>
  </div>
</template>

<script>
  import Answer from '../../../service/answer.js'
  export default {
    data () {
      return {
        text: '',
        answer: {
            loading: false,
            finished: false,
            refreshing: false,
            items: []
        },
        param: {
          p: 0,
          n: 10
        },
		disabled: false,
		loading: false
      }
    },
	mounted() {
		window.addEventListener('scroll', this.handleScroll, true)
	},
	beforeDestroy() {
		window.removeEventListener('scroll', this.handleScroll, true)
	},
    methods:{
		handleScroll () {
			this.disabled = this.utils.handleScroll()
		},
      fnLoadData() {
		  if (this.answer.loading && !this.answer.finished && !this.loading) {
		  	this.loading = true
		  	this.param.p++
		  	Answer.fnGetDataList({p: this.param.p, n: 20, isLoading: true}).then(res => {
		  		this.loading = false
		  		// 加载状态结束
		  		this.answer.loading = false;
		  		if (res && res.status) {
		  			this.answer.items = this.answer.items.concat(res.data)
		  		} else {
		  			this.answer.finished = true;
		  			if (this.answer.items.length > 0) this.text = '没有更多了'
		  		}
		  	})
		  }
      },
      fnLoadMore() {
        this.text = '';
        this.answer.finished = false;
        this.param.p = 0;
        this.answer.loading = true;
		this.answer.refreshing = false;
		this.answer.items = []
        this.fnLoadData();
      },
      fnOpenDetail: function(id) {
        this.utils.fnOpenCommon(this, {name: 'answer_detail', params: {id: id}})
      }
    }
  }
</script>

<style scoped>
    div.header_top {
        height: 50px/* 50px */;
        line-height: 50px;
    }
    section.answer_list div.list {
        padding: 10px 5px/* 5px */;
        position: relative;
    }
    section.answer_list div.list div.cont {
        padding-left: 5px;
    }

    section.answer_list div.list div.cont span.tag {
        display: inline-block;
        width: 18px;
        height: 18px;
        line-height: 18px;
        border-radius: 50%;
    }

    section.answer_list div.list div.cont span.reward {
        background-color: #f4c63d;
    }

    section.answer_list div.list div.cont div.da {
        position: absolute;
        right: 5px;
        bottom: 10px;
        width: 36px;
        height: 36px;
        line-height: 36px;
        border: 1px solid var(--pink);
        border-radius: 4px;
    }
    </style>
